<!--
v-model:value   可支持双向绑定
-->
<template>
  <a-cascader
      :field-names="fieldNames"
      :placeholder="placeholder"
      :options="options"
      v-model:value="defaultValue"
      @change="onChange"
  />
</template>

<script setup>
import { onMounted, ref, watch } from 'vue'

const emit = defineEmits(['change'])
const props = defineProps({
  index: {
    type: Number,
    default () {
      return 0
    }
  },
  placeholder: {
    type: String,
    default: '部门筛选'
  },
  // 默认值
  value: {
    type: Array,
    default () {
      return []
    }
  }
})
const fieldNames = ref({ label: 'label', value: 'value', children: 'children' })
const defaultValue = ref([])
const options = ref([])

watch(() => props.value, (curr, old) => {
  defaultValue.value = curr
})

onMounted(() => {
  defaultValue.value = props.value

  options.value = [
    {
      value: '1',
      label: '总裁办',
      children: [
        {
          value: '2',
          label: '总台'
        },
      ],
    },
    {
      value: '3',
      label: '业务部',
      children: [
        {
          value: '4',
          label: '市场部',
          children: [
            {
              value: '5',
              label: '市场部的下级部门',
            },
          ],
        },
        {
          value: '6',
          label: '商务部',
          children: [
            {
              value: '7',
              label: '商务部的下级部门',
            },
          ],
        },
      ],
    }
  ]
})

const onChange = (value,selectedOptions) => {
  emit('change', value, selectedOptions)
  defaultValue.value = value
}

</script>

<style scoped>

</style>
